<template>
  <HeaderTitle title="更改密码"></HeaderTitle>
  <form class="changePwCon" @submit.prevent="changepw">
    <div class="cpInputBox">
      <div class="cpTitle"><span>输入旧密码</span></div>
      <input
        class="input-br0-white cpInput"
        type="password"
        name="password"
        required
        autofocus
        v-model="oldPassword"
      />
    </div>
    <div class="cpInputBox">
      <div class="cpTitle"><span>新密码</span></div>
      <input
        class="input-br0-white cpInput"
        type="password"
        name="password"
        required
        autofocus
        v-model="newPassword"
      />
    </div>
    <div class="cpInputBox">
      <div class="cpTitle"><span>确认新密码</span></div>
      <input
        class="input-br0-white cpInput"
        type="password"
        name="password"
        required
        autofocus
        v-model="confirmPassword"
      />
    </div>

    <div class="submitBtndiv">
      <button class="btn-br10-purple" type="submit" value="submit">确认</button>
    </div>
  </form>
</template>

<script setup>
import HeaderTitle from "src/components/HeaderTitle.vue";
import { useQuasar, LocalStorage } from "quasar";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { api, API_PREFIX } from "boot/axios";

const $router = useRouter();
const oldPassword = ref(null);
const newPassword = ref(null);
const confirmPassword = ref(null);
const staffID = LocalStorage.getItem("staffID");

const $q = useQuasar();

// Function: Change Password
const changepw = async () => {
  // call api
  // console.log("1" + oldPassword);
  // console.log("2" + oldPassword.value);
  console.log("submit");
  // console.log("3" + staffID);
  if (newPassword.value === confirmPassword.value) {
    try {
      const res = await api.post(API_PREFIX + "/updatepwd/", {
        oldPWD: oldPassword.value,
        newPWD: confirmPassword,
        staffcode: staffID,
      });
      console.log("res:" + res);
      const data = res.data;
      const status = res.status;
      const code = res.code;
      console.log("data: ", data);
      console.log("status: ", status);
      
      const message = data.message;
      console.log("message: ", message);

      if (message != "Success") {
        console.log("Fail");
        $q.notify({
          type: "warning",
          textColor: "black",
          message: "更改密码失败",
          iconSize: "2rem",
          timeout: 2000,
          position: "center",
        });
      } else {
        $q.notify({
          type: "positive",
          textColor: "white",
          message: "成功更改密码,请重新登录",
          iconSize: "2rem",
          timeout: 2000,
          position: "center",
        });
        $router.push("/auth"); 
      }
    } catch (error) {
      console.log("fail");
      $q.notify({
        type: "warning",
        textColor: "black",
        message: "更改密码失败",
        iconSize: "2rem",
        timeout: 2000,
        position: "center",
      });
      return false;
    }
  } else {
    $q.notify({
      type: "positive",
      textColor: "white",
      message: "新密码跟确认新密码不一致",
      iconSize: "2rem",
      timeout: 2000,
      position: "center",
    });
  }
};
</script>

<style lang="scss" scoped>
.changePwCon {
  background-color: rgba(255, 255, 255, 0.774);
  width: 50%;
  margin-top: 15%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  @media (max-width: 650px) {
    width: 80%;
    font-size: 1rem;
  }
  .cpInputBox {
    margin-top: 5px;
    margin-bottom: 5px;
    .cpTitle {
      margin-bottom: 5px;
      font-weight: bold;
    }

    .cpInput {
      width: 80%;
    }
  }
  .submitBtndiv {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}
</style>
